<script setup>
import axios from "axios";
import {ref} from "vue";
import {ElMessage} from "element-plus";

let cabinet=ref({})
let total=ref()
let tableData=ref([])
const getCourierList = () => {
  axios.post("/api/system/CabineList/",cabinet.value).then(
      res=>{
        if (res.data.code==200){
          tableData.value=res.data.data.list
          total.value=res.data.data.table
        }
      }
  )
}
getCourierList()
const handleSizeChange = () => {
  getCourierList()
}
const handleCurrentChange = () => {
  getCourierList()
}

</script>

<template>
<!--  <el-dialog-->
<!--      v-model="dialogVisible"-->
<!--      title="Tips"-->
<!--      width="30%"-->
<!--      :before-close="handleClose"-->
<!--  >-->
<!--    <span>添加管理员信息</span>-->
<!--    <template #footer>-->
<!--      <span class="dialog-footer">-->
<!--          <el-form-item label="区号">-->
<!--            <el-select v-model="courierInfo.areaCode" placeholder="please select your zone">-->
<!--              <el-option label="菲律宾-马尼拉帕赛" value="菲律宾-马尼拉帕赛" />-->
<!--              <el-option label="中国-上海浦东" value="中国-上海浦东" />-->
<!--              <el-option label="中国-广州天河" value="中国-广州天河" />-->
<!--            </el-select>-->
<!--          </el-form-item>-->

<!--        <el-form-item label="手机号">-->
<!--          <el-input v-model="courierInfo.phone" />-->
<!--        </el-form-item>-->

<!--        <el-form-item label="真实姓名">-->
<!--          <el-input v-model="courierInfo.realName" />-->
<!--        </el-form-item>-->


<!--        <el-form-item label="快递公司">-->
<!--          <el-select v-model="courierInfo.companyId" placeholder="请选择公司">-->
<!--            <el-option-->
<!--                v-for="item in company"-->
<!--                :key="item.companyId"-->
<!--                :label="item.companyName"-->
<!--                :value="item.companyId"-->
<!--            />-->
<!--          </el-select>-->
<!--        </el-form-item>-->

<!--        <el-button @click="save">确认提交</el-button>-->
<!--      </span>-->
<!--    </template>-->
<!--  </el-dialog>-->


<!--  <el-button @click="addCourierInfo">添加管理员</el-button>-->
  <el-table :data="tableData" style="width: 100%">
    <el-table-column label="柜机ID（主键）" width="180">
      <template #default="scope">
        <div style="display: flex; align-items: center">
          <el-icon><timer /></el-icon>
          <span style="margin-left: 10px">{{ scope.row.cabinetId }}</span>
        </div>
      </template>
    </el-table-column>

    <el-table-column label="柜机编码" width="180">
      <template #default="scope">
        <div style="display: flex; align-items: center">
          <el-icon><timer /></el-icon>
          <span style="margin-left: 10px">{{ scope.row.cabinetCode }}</span>
        </div>
      </template>
    </el-table-column>

    <el-table-column label="所属区域（如“菲律宾-马尼拉帕赛”）（关联柜机区域）" width="180">
      <template #default="scope">
        <div style="display: flex; align-items: center">
          <el-icon><timer /></el-icon>
          <span style="margin-left: 10px">{{ scope.row.areaCode }}</span>
        </div>
      </template>
    </el-table-column>


    <el-table-column label="详细地址（如塔夫特大街市政厅大堂）" width="180">
      <template #default="scope">
        <div style="display: flex; align-items: center">
          <el-icon><timer /></el-icon>
          <span style="margin-left: 10px">{{ scope.row.detailAddress }}</span>
        </div>
      </template>
    </el-table-column>

    <el-table-column label="设备型号（如DOSON32）" width="180">
      <template #default="scope">
        <div style="display: flex; align-items: center">
          <el-icon><timer /></el-icon>
          <span style="margin-left: 10px">{{ scope.row.deviceModel }}</span>
        </div>
      </template>
    </el-table-column>

    <el-table-column label="存储类型：常温、冷藏" width="180">
      <template #default="scope">
        <div style="display: flex; align-items: center">
          <el-icon><timer /></el-icon>
          <span style="margin-left: 10px">{{ scope.row.storageType }}</span>
        </div>
      </template>
    </el-table-column>

    <el-table-column label="MAC地址（10-15位）（关联t_admin）" width="180">
      <template #default="scope">
        <div style="display: flex; align-items: center">
          <el-icon><timer /></el-icon>
          <span style="margin-left: 10px">{{ scope.row.macAddress }}</span>
        </div>
      </template>
    </el-table-column>

    <el-table-column label="安装日期" width="180">
      <template #default="scope">
        <div style="display: flex; align-items: center">
          <el-icon><timer /></el-icon>
          <span style="margin-left: 10px">{{ scope.row.installDate }}</span>
        </div>
      </template>
    </el-table-column>

    <el-table-column label="是否开通：0（未开通）、1（已开通）" width="180">
      <template #default="scope">
        <div style="display: flex; align-items: center">
          <el-icon><timer /></el-icon>
          <span style="margin-left: 10px">{{ scope.row.isEnabled }}</span>
        </div>
      </template>
    </el-table-column>

    <el-table-column label="开通时间" width="180">
      <template #default="scope">
        <div style="display: flex; align-items: center">
          <el-icon><timer /></el-icon>
          <span style="margin-left: 10px">{{ scope.row.enableTime }}</span>
        </div>
      </template>
    </el-table-column>

    <el-table-column label="柜机状态：正常、异常、重启中、已关机、禁用" width="180">
      <template #default="scope">
        <div style="display: flex; align-items: center">
          <el-icon><timer /></el-icon>
          <span style="margin-left: 10px">{{ scope.row.cabinetStatus }}</span>
        </div>
      </template>
    </el-table-column>

    <el-table-column label="管理管理员ID" width="180">
      <template #default="scope">
        <div style="display: flex; align-items: center">
          <el-icon><timer /></el-icon>
          <span style="margin-left: 10px">{{ scope.row.manageAdminId }}</span>
        </div>
      </template>
    </el-table-column>

    <el-table-column label="创建时间" width="180">
      <template #default="scope">
        <div style="display: flex; align-items: center">
          <el-icon><timer /></el-icon>
          <span style="margin-left: 10px">{{ scope.row.createTime }}</span>
        </div>
      </template>
    </el-table-column>

    <el-table-column label="更新时间" width="180">
      <template #default="scope">
        <div style="display: flex; align-items: center">
          <el-icon><timer /></el-icon>
          <span style="margin-left: 10px">{{ scope.row.updateTime }}</span>
        </div>
      </template>
    </el-table-column>



    <el-table-column label="Operations">
      <template #default="scope">
        <el-button size="small" @click="handleEdit(scope.$index, scope.row)"
        >Edit</el-button
        >
        <el-button
            size="small"
            type="danger"
            @click="handleDelete(scope.$index, scope.row)"
        >Delete</el-button
        >
      </template>
    </el-table-column>
  </el-table>
  <div class="demo-pagination-block">
    <div class="demonstration">All combined</div>
    <el-pagination
        v-model:current-page="cabinet.pageNum"
        v-model:page-size="cabinet.pageSize"
        :page-sizes="[100, 200, 300, 400]"
        :small="small"
        :disabled="disabled"
        :background="background"
        layout="total, sizes, prev, pager, next, jumper"
        :total="400"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
    />
  </div>
</template>

<style scoped>

</style>